<script setup lang="ts">
const props = defineProps({
  textColor: {
    type: String,
    default: '#020202'
  },
  loading: {
    type: Boolean,
    default: true
  }
});
const { textColor, loading } = toRefs(props);
</script>

<template>
  <div v-if="loading" class="loadingText">
    <div>O</div>
    <div>n</div>
    <div>e</div>
    <div>D</div>
    <div>o</div>
    <div>t</div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</template>

<style scoped lang="scss">
$textColor: v-bind( textColor );
.loadingText {
  /* loadingText 样式 */
  position: absolute;
  top: 50%;
  left: 50%;
  overflow:visible;
  width:80%;
  height:36px;
  text-align:center;
  transform: translate(-50%, -50%);
  -webkit-touch-callout: none;
  user-select: none;
  cursor:default;

  & div {
    position:absolute;
    margin:0 10px;
    width:30px;
    height:36px;
    font-size:3em;
    color: $textColor;
    opacity:0;
    animation:move 3.6s linear infinite;
    transform:rotate(180deg);
  }
  & div:nth-child(7)::before{
    position:absolute;
    bottom:-30px;
    left:0;
    width:15px;
    height:15px;
    border-radius: 100%;
    background:$textColor;
    content:'';
  }
  & div:nth-child(8)::before{
    position:absolute;
    bottom:-30px;
    left:0;
    width:15px;
    height:15px;
    border-radius: 100%;
    background: $textColor;
    content:'';
  }
  & div:nth-child(9)::before{
    position:absolute;
    bottom:-30px;
    left:0;
    width:15px;
    height:15px;
    border-radius: 100%;
    background:$textColor;
    content:'';
  }

  & div:nth-child(2) {
    animation-delay:0.4s;
  }
  & div:nth-child(3) {
    animation-delay:0.8s;
  }
  & div:nth-child(4) {
    animation-delay:1.2s;
  }
  & div:nth-child(5) {
    animation-delay:1.6s;
  }
  & div:nth-child(6) {
    animation-delay:2s;
  }
  & div:nth-child(7) {
    animation-delay:2.4s;
  }
  & div:nth-child(8) {
    animation-delay:2.6s;
  }
  & div:nth-child(9) {
    animation-delay:2.8s;
  }

  @keyframes move {
    0% {
      right:0;
      opacity:0;
    }
    35% {
      right: 41%;
      transform:rotate(0deg);
      opacity:1;
    }
    65% {
      right:59%;
      transform:rotate(0deg);
      opacity:1;
    }
    100% {
      right:100%;
      transform:rotate(-180deg);
      opacity:0;
    }
  }
}

</style>
